<template>
  <div class="notification-list">
    <template v-if="notifications.length">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        class="notification-item"
        :class="{ 'is-read': notification.is_read }"
        @click="handleClick(notification)"
      >
        <div class="notification-title">{{ notification.title }}</div>
        <div class="notification-content">{{ notification.content }}</div>
        <div class="notification-meta">
          <span class="notification-type">{{ notification.type }}</span>
          <span class="notification-time">{{ formatTime(notification.created_at) }}</span>
        </div>
      </div>
    </template>
    <div v-else class="empty-text">
      暂无通知
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import dayjs from 'dayjs';

export default defineComponent({
  props: {
    notifications: {
      type: Array,
      default: () => []
    }
  },
  
  emits: ['read'],
  
  setup(props, { emit }) {
    const handleClick = (notification) => {
      if (!notification.is_read) {
        emit('read', notification.id);
      }
    };
    
    const formatTime = (time) => {
      return dayjs(time).format('YYYY-MM-DD HH:mm');
    };
    
    return {
      handleClick,
      formatTime
    };
  }
});
</script>

<style scoped>
.notification-list {
  padding: 16px;
}

.notification-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.notification-item:hover {
  background-color: #f5f5f5;
}

.notification-item.is-read {
  opacity: 0.7;
}

.notification-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.notification-content {
  color: #666;
  margin-bottom: 8px;
}

.notification-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: space-between;
}

.empty-text {
  text-align: center;
  color: #999;
  padding: 32px 0;
}
</style> 